<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Login</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='demo.css') }}">
    <link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <div class="outbox">

        <div class="pic">

       <a class="logo">From GLZG</a>

        </div>

        <div class="rightbox">

            <div class="textbox">
                <form autocomplete="off" method="POST" action="{{ base_url }}/do_login">
                <label type="text" class="nicheng">昵称</label>
                <input class="inputbox" type="text" autocomplete="off" placeholder="Username" value="" id="username"
                    name="username" minlength="2" required />
                <br/>

                <label class="mima" for="text">密码</label>
                <input class="inputbox" type="password" autocomplete="off" placeholder="Password" value="" id="password"
                    name="password" minlength="8" required />
                <br/>

                <input class="login" type="submit" value="登录" />
                    <a href="#" class="forget">Forget Password?</a>
                </form>

            </div>
        </div>

    </div>
</body>
<style>
  body {

  background-image: linear-gradient(to right, #ba5370, #f4e2d8);

  /*严格来说background-image要做浏览器兼容*/

  display: flex; /*将整个body定义为一个flex容器*/

  justify-content: center; /*将flex项目在容器中心对齐*/

}

.outbox {

  /*定义为弹性布局*/

  display: flex;



  /*规定定位类型*/

  position: relative;

  top: 50px;

  width: 1000px;

  height: 630px;



  /*其他效果*/

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
  border-radius: 10px;

}

.pic {

  background-image: url(static/side4.png);

  width: 700px;

  height: 630px;

  /*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*/

  background-size: cover;

}

.rightbox {

  display: flex;

  justify-content: center; /*将felx项目--即下面的textbox在容器的水平中心*/

  align-items: center; /*将felx项目--即下面的textbox在容器的竖直中心*/



  width: 400px;

  height: 630px;

  background-color: white;
  border-radius: 10px;

}

.textbox {

  position: relative;

  top: 20px;

  width: 300px;

  height: 500px;

}



.textbox .inputbox {

  /*按照box的元素从内到外设计*/

  width: 200px;

  padding: 10px;

  margin: 20px 30px;

  border-style: none;

  border-bottom: 3px solid #92bda6;

}

.forget {

  font: 12px;

  color: #92bda6;

  float: right;

  margin: 15px 25px; /*微调位置*/

}

.login {

  display: block;

  /*定位*/

  position: absolute;

  bottom: 100px;

  margin-left: 75px;

  /*盒子样式*/

  background-image: linear-gradient(to left, #FCAA23, #3caeeb4f);

  width: 150px;

  height: 60px;

  border-radius: 20px;

  /*文字样式*/

  font: 900 30px "";

  text-decoration: none; /*取消下划线*/

  text-align: center;

  line-height: 60px;

  color: #05020198;

}

/* Logo */
.logo
{
    width: 204px;
    height: 44px;
    top: 31px;
    left: 74px;
    color:#05020141;
}


/* 矩形 */
.juxing
{
    width: 275px;
    height: 60px;
    top: 324px;
    left: 1032px;
    border-radius: 21px;
    background-color: #F9F2E3;
}
/* 昵称： */
.nicheng
{
    width: 90px;
    height: 43px;
    top: 330px;
    left: 928px;
    font-family: SourceHanSansSC;
    color: #FCAA23;
    font-weight: 700px;
    font-size: 25px;
    font-style: normal;
    text-decoration: none;
    text-align: left;
}

/* 矩形副本 */
.fuben
{
    width: 278px;
    height: 60px;
    top: 410px;
    left: 1032px;
    border-radius: 21px;
    background-color: #F9F2E3;
}
/* 密码： */
.mima
{
    width: 90px;
    height: 43px;
    top: 477px;
    left: 896px;
    font-family: SourceHanSansSC;
    color: #FCAA23;
    font-weight: 700px;
    font-size: 25px;
    font-style: normal;
    text-decoration: none;
    text-align: left;
}

/* Button */
.button
{
    width: 243px;
    height: 73px;
    top: 606px;
    left: 1032px;
}

/* From GLZG */
.GLZG
{
    width: 105px;
    height: 29px;
    top: 834px;
    left: 1275px;
    font-family: SourceHanSansSC;
    color: #000000;
    font-weight: 400px;
    font-size: 20px;
    font-style: normal;
    text-decoration: none;
    text-align: left;
}

</style>

</html>